<!doctype html>
<html lang="en">
<head>
    <title>wijtooltip-overview</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <link href="../../themes/wijmo/jquery.wijmo.wijtooltip.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijutil.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijtooltip.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#targetContainer [title]").wijtooltip();
        });
    </script>
    <style type="text/css">
        #targetContainer
        {
            position: relative;
        }
        #targetContainer img
        {
            margin: 0;
            padding: 0;
            position: absolute;
            border: solid 3px #333;
        }
    </style>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div id="targetContainer">
                <img src="http://placekitten.com/g/257/109" style="left: 0; top: 0;" title="KITTY HAS REACHED CRITICAL MASS" alt="" />
                <img src="http://placekitten.com/g/257/150" style="left: 0; top: 109px;" title="You eated my cookie?" alt=""  />
                <img src="http://placekitten.com/482/180" style="left: 0; top: 259px;" title="O Hay Guys" alt=""  />
                <img src="http://placekitten.com/g/225/256" style="left: 257px; top: 0;" title="You can't see me, I'm invisible" alt=""  />
                <img src="http://placekitten.com/111/143" style="left: 482px; top: 0px;" title="It's Caturday?" alt=""  />
                <img src="http://placekitten.com/g/111/296" style="left: 482px; top: 143px;" title="placeakitten.com" alt=""  />
                <img src="http://placekitten.com/g/151/200" style="left: 593px; top: 0;" title="I'm on ur internets" alt="" />
                <img src="http://placekitten.com/152/239" style="left: 593px; top: 200px;" title="I big scary monster" alt=""  />
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            With the wijtooltip widget, you can easily create custom tooltips to offer your
            end-users a better user experience. You can control the behavior, the position,
            the event that shows the tooltip, and more with the wijtooltip widget. The samples
            in this section will introduce you to some of these great features.
        </div>
    </div>
</body>
</html>
